<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2024/5/20
  Time: 18:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生管理页面</title>
</head>
<body>
  <div class="container">
      <!--顶部-->
      <jsp:include page="../../top.jsp"/>

      <!--主体界面-->
      <!--布局管理toolbar顶部工具类-->
      <section class="col-sm-12 mb-2">
          <!--水平方向从左边开始，垂直方向居中-->
          <div class="d-flex justify-content-start align-items-center">
              <!--mb：margin-bottom-->
              <!--<section>定义文档中的一个节或区段。用于将文档内容分割成有意义的部分，可以帮助搜索引擎和阅读器更好地理解页面结构。
              标识文档中的一个主题性的内容区域-->
              <!--点击，跳转的是当前项目路径下的admin/toStudentAdd请求，然后请求跳转展示响应的jsp页面-->
              <!--动态获取应用上下文的根/项目名,getContextPath-->
              <a href="<%=request.getContextPath()%>/admin/toStudentAdd" class="btn btn-primary mr-3">新增</a>
              <a href="#" class="btn btn-primary mr-3" onclick="doDelete()">删除</a>
              <!--根据条件进行搜索-->
              <!--表单默认距离底部有一个值，使用mb-0去掉-->
              <form class="form-inline mb-0" id="searchForm">
                  <input type="text" class="form-control" name="realName" placeholder="请输入用户名"/>
                  <!--设置一个隐藏的input，用来传递pageNow，点击上一页/其他内容页时候，修改这个value值，从而使用Limit进行展示数据-->
                  <!--这个pageNow参数，当跳转到更新页面后会修改，所以存储在request域中，在一次请求中有效-->
                  <input type="hidden" name="pageNow" id="pageNow" value="<%=request.getAttribute("pageNow")%>"/>
                  <input type="button" class="btn btn-primary ml-3" onclick="doSearch()" value="查询"/>
              </form>
          </div>
      </section>

      <!--查询出的学生表格-->
      <section class="col-sm-12">
          <table class="table table-bordered table-hover table-striped">
              <!--表头-->
              <thead>
                  <tr>
                      <th>选择</th>
                      <th>系统标识</th>
                      <th>学号</th>
                      <th>姓名</th>
                      <th>出生日期</th>
                      <th>电话</th>
                      <th>邮箱</th>
                      <th>免冠照片</th>
                      <th>操作</th>
                  </tr>
              </thead>
              <!--表体-->
              <tbody id="tbody"></tbody>
          </table>
      </section>

      <!--为表格进行分页-->
      <section class="col-sm-12">
          <ul class="pagination">

          </ul>
      </section>

      <!--底部-->
      <jsp:include page="../../bottom.jsp"/>
  </div>


  <script src="<%=request.getContextPath()%>/resources/js/manage.js">
  </script>

  <script>
      //点击删除选择的内容
      function doDelete() {
          //获取到选择的是第几行,input[name = idsToDelete]：选择name属性为idsToDelete的标签input，:表示属性
          var checkedInputs = $("input[name = idsToDelete]:checked")
          console.log("check"+checkedInputs.length)
          console.log("check"+checkedInputs.toString())
          if(!checkedInputs || checkedInputs.length===0){
              $("#tipCont").text("Please Choose The Content You Delete!")
              $("#tioModal").modal("show")
              return;
          }

          //存储获取到的行的id
          var idsToDelete = []
          $.each(checkedInputs,function(i,ele){
              idsToDelete.push($(ele).val())
          })

          //向后台发送请求
          $.ajax({
              type:'post',
              url: basePath+"/admin/deleteStudentByIds",
              //由于指定了接受数据使用@ResponseBody来接受，所以指定参数的类型
              contentType:"application/json",
              //将数组序列化为JSON
              data:JSON.stringify({"idsToDelete":idsToDelete}),
              success:function (result) {
                  if(result.success){
                      $("#tipCont").text(result.errMsg)
                      $("#tipModal").modal("show")
                      setTimeout(()=>{location.href=basePath+"/admin/toStudentManage";},2000)
                  }else{
                      $("#tipCont").text(result.errMsg)
                      $("#tipModal").modal("show")
                  }
              }
          })
      }
  </script>
</body>
</html>
